<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习时长统计</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
</head>
<body>
<h2>学习时长折线图</h2>
<div id="chart" style="width: 800px;height:400px;"></div>

<label for="viewSelector">选择视图:</label>
<select id="viewSelector">
    <option value="daily">日</option>
    <option value="weekly">周</option>
    <option value="monthly">月</option>
</select>

<script>
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);
    let currentView = 'daily';

    function fetchData(viewType, userId) {
        fetch(`http://localhost:8086/learning/duration/${viewType}/${userId}`)
            .then(response => response.json())
            .then(data => {
                const keys = Object.keys(data).sort();
                const values = keys.map(k => data[k]);

                myChart.setOption({
                    title: { text: viewType === 'daily' ? '每日学习时长' :
                            viewType === 'weekly' ? '每周学习时长' : '每月学习时长' },
                    tooltip: {},
                    xAxis: { type: 'category', data: keys },
                    yAxis: { type: 'value', name: '学习时长（分钟）' },
                    series: [{
                        data: values,
                        type: 'line',
                        smooth: true
                    }]
                });
            });
    }

    document.getElementById('viewSelector').addEventListener('change', function () {
        currentView = this.value;
        fetchData(currentView, 'user_2');
    });

    // 初始化加载
    fetchData(currentView, 'user_2');
</script>
</body>
</html>